<template>
  <view class="universal-detail">
    <view class="universal-detail-top">
      <view class="universal-detail-top-time"><text class="universal-detail-top-title">指派</text></view>
    </view>
    <view class="universal-detail-cont">
      <van-form class="universal-detail-form initForm" @submit="onSubmit" :readonly="loading" label-width="100px" colon>
        <van-cell-group inset>
          <van-field
            v-model="form.assignedHandlerName"
            is-link readonly  required
            name="picker"
            label="指派处理人"
            placeholder="请选择处理人"
            @click="selectShow.assigned = true"
            :rules="[{ required: true, message: '请选择处理人' }]"
          />
          <van-field
            v-model="form.planFinishTime"
            is-link readonly  required
            name="datePicker"
            label="计划完成时间"
            placeholder="计划完成时间"
            @click="selectShow.calendar = true"
            :rules="[{ required: true, message: '请选择计划完成时间' }]"
          />
        </van-cell-group>
        <view class="universal-detail-bottom">
          <van-button @click="$emit('cancel')" class="universal-detail-bottom-button universal-detail-bottom-button-cancel" type="default">取消</van-button>
          <van-button 
            class="universal-detail-bottom-button universal-detail-bottom-button-sumbit" type="primary" native-type="submit"
            :loading="loading" loading-text="提交中..."
          >提交</van-button>
        </view>
      </van-form>
    </view>
    <!-- 选择器 处理人 -->
    <picker-search
      v-model:show="selectShow.assigned"
      :columns="assignedList"
      @confirm="onAssignedConfirm"
      @cancel="selectShow.assigned = false"
    ></picker-search>
    <!-- 日历 -->
    <picker-date-time
      v-model:show="selectShow.calendar" 
      :maxDate="maxDate"
      @confirm="onCalendarConfirm" 
    ></picker-date-time>
  </view>
</template>

<script setup>
import dayjs from 'dayjs';
import store from '@/store'
import { ref } from 'vue';
import { apiHiddenTrobleAssiged } from '@/api/hiddenTroble'
import { apiUsersList } from '@/api/common';

const model = defineModel();
const emit = defineEmits(['confirm']);
const userInfo = store.getters.GET_USER_INFO.sysUser;
const loading = ref(false);

const maxDate = new Date(2035, 1, 1);// 日历可选的最大值
const selectShow = ref({
  assigned: false,
  calendar: false,
});
const form = ref({
  assignedHandler: null,
  assignedHandlerName: null,
  planFinishTime: ''
})
const assignedList = ref([]);

const onAssignedConfirm = ({selectedValues, selectedOptions}) => {
  form.value.assignedHandler = selectedOptions[0].value;
  form.value.assignedHandlerName = selectedOptions[0].text;
  selectShow.value.assigned = false;
};
const onCalendarConfirm = (value) => {
  form.value.planFinishTime = value;
  selectShow.value.calendar = false;
};

const onSubmit = () => {
  loading.value = true;
  const params = {
    troubleId: model.value.troubleId,
    ...form.value
  }
  apiHiddenTrobleAssiged(params).then(res => {
    loading.value = false;
    emit('confirm');
  })
};
const getUsersList = () => {
  apiUsersList({
    pageNumber: 1,
    pageSize: 10000
  }).then(res => {
    assignedList.value = res.records.map(n => ({
      text: n.name,
      value: n.userId
    }));
  })
};
getUsersList();
</script>

<style lang="scss" scoped>
@import '@/assets/universal-detail.scss';
</style>